<template>
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <!-- 封面图 -->
      <div class="h-48 bg-gray-300 relative">
        <img 
          v-if="user.coverImageUrl" 
          :src="user.coverImageUrl" 
          alt="Cover image" 
          class="w-full h-full object-cover"
        >
        
        <div v-if="isOwnProfile" class="absolute bottom-4 right-4">
          <button class="bg-white/80 hover:bg-white text-gray-800 rounded-full p-2 transition">
            <i class="fas fa-camera"></i>
          </button>
        </div>
      </div>
      
      <!-- 用户信息 -->
      <div class="px-6 -mt-16">
        <div class="flex justify-between items-end">
          <div>
            <UserAvatar :user="user" size="xl" class="border-4 border-white" />
          </div>
          
          <div v-if="isOwnProfile" class="mt-4">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300">
              编辑资料
            </button>
          </div>
          
          <div v-else>
            <button 
              v-if="!isFollowing"
              class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300"
              @click="handleFollow"
            >
              关注
            </button>
            
            <button 
              v-else
              class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-md transition duration-300"
              @click="handleUnfollow"
            >
              已关注
            </button>
          </div>
        </div>
        
        <div class="mt-4">
          <h1 class="text-2xl font-bold text-gray-900">{{ user.username }}</h1>
          <p class="text-gray-600 mt-1">{{ user.bio || '这个人很懒，还没有设置简介' }}</p>
          
          <div class="flex items-center mt-3 text-gray-500">
            <div class="mr-6">
              <span class="font-medium text-gray-900">{{ user.postsCount || 0 }}</span>
              <span class="ml-1">帖子</span>
            </div>
            <div class="mr-6">
              <span class="font-medium text-gray-900">{{ user.followersCount || 0 }}</span>
              <span class="ml-1">粉丝</span>
            </div>
            <div>
              <span class="font-medium text-gray-900">{{ user.followingCount || 0 }}</span>
              <span class="ml-1">关注</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, computed, onMounted } from 'vue'
  import { useAuthStore } from '@/store/modules/auth'
  import { useUserStore } from '@/store/modules/user'
  import UserAvatar from './UserAvatar.vue'
  
  export default {
    components: {
      UserAvatar
    },
    
    props: {
      user: {
        type: Object,
        required: true
      }
    },
    
    setup(props) {
      const authStore = useAuthStore()
      const userStore = useUserStore()
      
      const currentUser = computed(() => authStore.currentUser)
      const isOwnProfile = computed(() => currentUser.value?.id === props.user.id)
      const isFollowing = computed(() => 
        currentUser.value?.following?.some(following => following.id === props.user.id)
      )
      
      const handleFollow = async () => {
        try {
          await userStore.followUser(props.user.id)
          // 更新用户状态
          await userStore.fetchUser(props.user.id)
        } catch (error) {
          console.error('Error following user:', error)
        }
      }
      
      const handleUnfollow = async () => {
        try {
          await userStore.unfollowUser(props.user.id)
          // 更新用户状态
          await userStore.fetchUser(props.user.id)
        } catch (error) {
          console.error('Error unfollowing user:', error)
        }
      }
      
      return {
        currentUser,
        isOwnProfile,
        isFollowing,
        handleFollow,
        handleUnfollow
      }
    }
  }
  </script>